import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Card, Col, Row } from "antd";

function Index() {
  const { id } = useParams();
  // console.log(id);
  const [list, setList ] = useState([]);
  console.log(list);

  const getData = async () => {
    const res = await axios.get(`/api/article/${id}`, {
      params: { article: id },
    });
    setList(res.data);
    // console.log(res);
  };
  useEffect(() => {
    getData();
  }, []);
  
  return (
    <div>
       <Row gutter={16}>
              
                    <Col span={12}>
                      <Card title={list.content} variant="borderless">
                       <p>{list.title}</p>
                       <p>{list.viewCount}</p>
                       <p>{list.updatedAt}</p>
                      </Card>
                    </Col>
          
              </Row>
          
  
    </div>
  );
}

export default Index;
